import React, { Component } from 'react';
import styles from './ImgPlay.css'; 

// import {globalQuery,globalPostQuery} from '../../services/global';
// import {getList_url,queryAlarm_url,setAlarm_url} from '../../services/ip';
 
import { Slider } from 'antd'; 

 

//图片播放
class ImgPlay extends Component {
  constructor(props){
    super(props);
    this.formRef = React.createRef();
    this.state={  
        imgSrc : require("../../../assets/main/demo.png"),
        data:[
            {url:"demo.png",time:"01:56"}, {url:"demo.png",time:"02:56"} , {url:"demo.png",time:"03:56"}, {url:"demo.png",time:"04:56"} , {url:"demo.png",time:"05:56"} ,
            {url:"demo.png",time:"06:56"} , {url:"demo.png",time:"07:56"}, {url:"demo.png",time:"08:56"}, {url:"demo.png",time:"09:56"}, {url:"demo.png",time:"10:56"} ,
            {url:"demo.png",time:"11:56"} , {url:"demo.png",time:"12:56"} , {url:"demo.png",time:"13:56"} , {url:"demo.png",time:"14:56"}  , {url:"demo.png",time:"15:56"} ,
            {url:"demo.png",time:"16:56"} , {url:"demo.png",time:"17:56"}  , {url:"demo.png",time:"18:56"} , {url:"demo.png",time:"19:56"}, {url:"demo.png",time:"20:56"} ,
             {url:"demo.png",time:"21:56"} ,{url:"demo.png",time:"22:56"}  , {url:"demo.png",time:"23:56"}, {url:"demo.png",time:"00:56"}    ],
        
        index:0,   //当前位置下标
        text:0,    //当前文字
        left:0,    
        textLeft:-7,
    }
    this.timerID=null
  }
 
   
  // 定时器
  iTimer = () => {
    this.timerID = setInterval(() => {
        if(this.state.index>=this.state.data.length-1){
            this.state.index = 0
            this.state.left = 0
        }else{
            this.state.index = this.state.index+1
        } 
        this.setState({
          imgSrc:require(`../../../assets/main/${this.state.data[this.state.index].url}`) ,
          text:this.state.data[this.state.index].time,
          left : this.state.left + parseInt(100/24) ,
          textLeft : this.state.left + parseInt(100/24) - 7
        }) 
    }, 1000); 
  };

    componentDidMount(){
        this.setState({
            inputValue: 10,
        });   
        setTimeout(this.iTimer,0);  //启动定时器

        this.setState({
          imgSrc:require(`../../../assets/main/${this.state.data[0].url}`) ,
          text:this.state.data[0].time,
          left : 0,
          textLeft : - 7
        })
            
    }
    // 组件清除时清除定时器
    componentWillUnmount() {
        clearInterval(this.timerID);
    }

  render() { 
      const {textLeft,imgSrc,text,left} = this.state;
    return (
      <div className={styles.centerBox}>
          <div className={styles.imgBox}>
                <img src={imgSrc}/>
          </div>
          <div className={styles.sliderBox}>
                <div className={styles.slider_bj}></div>
                <div className={styles.slider_track} style={{width:left+"%"}}></div>
                <div className={styles.slider_handle} style={{left:left+"%"}}></div>
                <div className={styles.slider_text} style={{left: textLeft +"%"}}>{text}</div>
          </div> 
      </div>
    );
  }
}

export default ImgPlay;
